@extends('layouts.console_header')

@section('title', '红包设置')

@section('resources')
    @parent
	<style>
		.details1_name table{border-color: #eee;margin-top: 20px;}
		.red_intercalate{cursor: pointer;}
		.red_intercalate_value{position: fixed;top: 200px;left: 50%;width: 500px;margin-left: -250px;border-radius: 5px;background-color: #fff;display: none;box-shadow: 0px 0px 5px 5px rgba(128,128,128,0.5);}
		.red_intercalate_value .title{text-align: center;margin: 10px 0;font-size: 20px;}
		.red_intercalate_value img{position: absolute;top: 10px;right: 10px;width: 30px;height: 30px;}
		.red_intercalate_value .content{margin: 10px 40px;}
		.red_intercalate_value .content input{border: 1px solid #000;padding: 5px;height: 15px;}
		#red_intercalate_cancel{background-color: #999;width: 100px;height: 30px;border-radius: 5px;margin-left: 20px;color: #fff;}
		#red_intercalate_sure{background-color: #9955c6;width: 100px;height: 30px;border-radius: 5px;margin-right: 20px;color: #fff;}
		.details2 .red_envelope_list{text-align: center;border-color: #eee;}
		.details2 .red_envelope_list td{padding: 5px;}
		.details2 .title{margin: 20px 0 20px 10px;border-left: 3px solid #9955c6;padding-left: 8px;}
		.details2 .set_up{text-align: center;margin: 17px 30px 0 0;font-size: 16px;padding: 5px;background-color: #9955c6;border-radius: 5px;}
		.describe{overflow: hidden;margin-bottom: 10px;}
		.describe span{float: left;}
		.describe a{float: right;color: #9955c6;}
	</style>
@endsection

@section('content')
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		    <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>系统设置></span>
		    <span class="co_violet">红包设置</span>
        </p>
		<a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
	</div>
	<div class="details1">
		<p>订单红包</p>
		<div class="describe">
			<span style="margin-left: 23px;">订单红包＝订单金额*{{env('RECHARGE_FEE')*100}}%*红包比例  ; 红包比例＝平台占比＋代理商占比</span>
			<a href="/console/system/red/envelope/history">历史设置记录>></a>
		</div>
	    <table border="1">
	    	<tr>
	    		<td>序号</td>
	    		<td>代理城市</td>
	    		<td>平台占比</td>
	    		<td>代理商占比</td>
	    		<td>红包比例</td>
	    		<td>使用期限</td>
	    		<td>操作</td>
	    	</tr>
        @foreach($lists as $list)
	    	<tr>
	    		<td>{{$list['id']}}</td>
	    		<td>{{$list['name']}}</td>
	    		<td>{{$list['hqratio']}}%</td>
	    		<td>{{$list['agentratio']}}%</td>
	    		<td>{{$list['ratio']}}%</td>
	    		<td>{{$list['validdays']}}天</td>
	    		<td><s class="co_violet red_intercalate" onclick="get_ratio('{{$list['id']}}', '{{$list['name']}}', '{{$list['hqratio']}}', '{{$list['agentratio']}}', '{{$list['validdays']}}', '{{$list['ratio']}}')">编辑</s></td>
	    	</tr>
        @endforeach
	    </table>
	</div>

	<!--这块内容还需要讨论一下-->
	{{--<div class="details2">--}}
		{{--<div class="oh">--}}
			{{--<p class="title fl">红包活动列表</p>--}}
			{{--<p class="set_up fr"><a style="width:100%;color: #fff;" href="/console/system/red/active/set">创建红包活动</a></p>--}}
		{{--</div>--}}
		{{--<table class="red_envelope_list" border="1">--}}
			{{--<thead>--}}
				{{--<tr>--}}
					{{--<td>序号</td>--}}
					{{--<td>活动名称</td>--}}
					{{--<td>投放位置</td>--}}
					{{--<td>投放用户</td>--}}
					{{--<td>红包总金额</td>--}}
					{{--<td>投放时间</td>--}}
					{{--<td>状态</td>--}}
					{{--<td>操作</td>--}}
				{{--</tr>--}}
			{{--</thead>--}}
			{{--<tbody>--}}
				{{--<tr>--}}
					{{--<td>1</td>--}}
					{{--<td>123开始</td>--}}
					{{--<td>首页</td>--}}
					{{--<td>0充值用户</td>--}}
					{{--<td>8000</td>--}}
					{{--<td>2017-02-25至2017-03-15</td>--}}
					{{--<td>已开始</td>--}}
					{{--<td>--}}
						{{--<a href="/console/system/red/active/details" class="co_violet">查看</a>--}}
						{{--<a href="#" class="co_orange">停止</a>--}}
					{{--</td>--}}
				{{--</tr>--}}
			{{--</tbody>--}}
		{{--</table>--}}
	{{--</div>--}}
	<!-- 总部红包比例设定 -->
	<form action="" method="" id="red_envelope_form">
		<nav class="red_intercalate_value">
			<p class="title">红包比例</p>
			<img class="fr red_intercalate_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
			<p class="content city co_gray">
				<span></span>
				<span></span>
			</p>
			<input type="hidden" name="cityid" value="{{$cityid}}">
			<input type="hidden" name="agentcityid" value="">
			<p class="content date">
				<span>使用期限:</span>
				<span>7天</span>
				<!-- <span style="margin-left: 40px;">红包方式：</span>
				<span>普通红包－仅用户本人领取</span> -->
			</p>
			<p class="content hqratio">
				<span>平台占比:30%*</span>
				<input style="width: 110px;" type="text" name="red_hqratio" value="" placeholder="请填入0~100数字">%
				<input type="hidden" name="hqratio" value="">
			</p>
			<p class="content agentratio">
				<span>代理商占比: </span>
				<span>70%*0%</span>
			</p>
			<p class="content message co_orange" hidden></p>
			<p style="overflow: hidden;margin: 20px 0;">
				<input class="fl" id="red_intercalate_cancel" type="button" name="" value="取消">
				<input class="fr" id="red_intercalate_sure" type="button" name="" value="确定">
			</p>
		</nav>
	</form>
</section>
@endsection

@section('scriptResources')
    @parent
    <script>
    	$(".red_intercalate").click(function(){
    		$(".red_intercalate_value").show();
    	})
    	$(".red_intercalate_close").click(function(){
    		$(".red_intercalate_value").hide();
    	})
    	$("#red_intercalate_cancel").click(function(){
    		$(".red_intercalate_value").hide();
    	})
    	function get_ratio(id, name, hqratio,agentratio,validdays,ratio) {
    		$("input[name='red_hqratio']").val(hqratio/30*100);
    	    $("input[name='agentcityid']").val(id);
    	    $(".city span").eq(0).html(name+"订单红包占比：");
    	    $(".city span").eq(1).html(ratio+'%');
    	    $(".date span").eq(1).html(validdays + '天');
    	    $(".agentratio span").eq(1).html('70%*' + (agentratio/70*100).toFixed(2)+"%");
    	    redHqratioBlur(agentratio)
    	}
    	function redHqratioBlur(agentratio){
    		$("input[name='red_hqratio']").blur(function(){
    	    	if($("input[name='red_hqratio']").val() == ""){
    	    		$(".message").show();
    	    		$(".message").html("请输入平台占比");
    	    	}else if($("input[name='red_hqratio']").val()<0||$("input[name='red_hqratio']").val()>100){
    	    		$(".message").show();
    	    		$(".message").html("平台占比不能少于0%或大于100%");
    	    	}else{
    	    		$(".message").hide();
    	    		var new_hqratio = 30*$("input[name='red_hqratio']").val()/100;
	    	    	var order_red_ratio = Number(agentratio) + (30*$("input[name='red_hqratio']").val()/100);
					$(".city span").eq(1).html(order_red_ratio+"%");
					$("input[name='hqratio']").val(new_hqratio);
    	    	}
    	    })
    	}
    	$("#red_intercalate_sure").click(function(){
    		if($("input[name='red_hqratio']").val() == ""){
    			$(".message").show();
    	    	$(".message").html("请输入平台占比");
    		}else if($("input[name='red_hqratio']").val()<0||$("input[name='red_hqratio']").val()>100){
	    		$(".message").show();
	    		$(".message").html("平台占比不能少于0%或大于100%");
    	    }else{
    			$(".message").hide();
    			$.ajax({
	    			url: '/console/system/red/envelope/hqratio/update',
	    			type: 'post',
	    			data:$("#red_envelope_form").serialize(),
	    			dataType:'json',
	                success:function(data){
	                    if(data.status == 'success') {
	                         $(".red_intercalate_value").hide();
	                         window.location.reload();
	                    } else {
	                        alert(data.message);
	                    }
	                }
	    		})
    		}
    	})
    </script>
@endsection